<template>
	<view class="business">
		<view class="nav d_f j_c_c a_i_c">
			<view class="text">Create my OPAI wallet</view>
			<image src="../../static/ct_0031_返回键.png" mode="" class="right" @tap="back"></image>
		</view>
		<image src="../../static/ct_0012_绿色顶.png" mode="" class="header"></image>
		<view class="box">
			<view class="title">The mnemonics are used to reply to the wallet and reset the wallet password. Please copy
				the mnemonics accurately and store them in a safe place</view>
         <view class="d_f f_w_w j_c_s_b">
			 <view v-for="(item,index) in records" :key="index" class="border">
				 {{item.name}}
			 </view>
		 </view>
		 <view class="remember">Remember</view>
		 <view class="size">-Do not disclose mnemonics to anyone</view>
		 <view class="size">-Once the mnemonic is lost, the asset cannot be recovered</view>
		 <view class="size">-Do not backup and save via screen capture and network transmission</view>
		 <view class="size">-In any case, please do not easily delete the wallet</view>
			
		</view>
		<view class="button d_f j_c_c a_i_c" @tap="continueUp">next</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				records:[],
			}
		},
		components: {

		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			//下一步
			continueUp() {
				uni.setStorageSync('records', this.records)
				uni.navigateTo({
					url:'/pages/index/mnemonicWords'
				}) 
			},
			//获取单词
			getData(){
				this.$api.individualWord().then(res=>{
					 this.records=res.data
				})
			}
		},
		onShow() {

		},
		onLoad(options) {
			this.getData()
		},
		watch: {

		},
		computed: {

		}
	}
</script>

<style scoped lang='scss'>
	.business {
		width: 100%;
		min-height: 100%;
		background: rgb(239, 237, 238);
		position: relative;
        padding-bottom: 32rpx;
		.nav {
			width: calc(100% - 64rpx);
			height: 160rpx;
			margin-left: 32rpx;
			position: relative;
			z-index: 9999;

			.text {
				font-size: 32rpx;
				font-weight: 700;
				color: #FFFFFF;
			}

			.right {
				width: 20rpx;
				height: 32rpx;
				position: absolute;
				left: 0rpx;
				z-index: 999;
				transform: rotate(180deg);
			}
		}

		.header {
			position: absolute;
			top: 0rpx;
			width: 100%;
			height: 229rpx;
			z-index: 1;
		}

		.box {
			width: 686rpx;
			margin-left: 32rpx;
			margin-top: 100rpx;
			background-size: 100% 100%;
			padding: 64rpx 32rpx;
			background: #FFFFFF;
			border-radius: 20rpx;

			.title {
				font-weight: 700;
				font-size: 32rpx;
			}
           .border{
			   width: 170rpx;
			   border: 1rpx solid #ccc;
			   border-radius: 10rpx;
			   margin-top: 32rpx;
			   margin-left: 32rpx;
			   white-space: nowrap;
			   overflow: hidden;
			   text-overflow: ellipsis;
			   font-size: 24rpx;
			   min-height: 56rpx;
			   min-width: 100rpx;
			   display: flex;
			   align-items: center;
			   justify-content: center;
		   }
		   .remember{
			   margin-top: 32rpx;
			   color: #E7623F;
			   font-size: 32rpx;
			   font-weight: 700;
		   }
		   .size{
			   margin-top: 16rpx;
			   font-size: 24rpx;
			   color: #E7623F;
		   }
		}

		.button {
			width: 622rpx;
			border-radius: 40rpx;
			background: rgb(101,186,144);
			color: #FFFFFF;
			height: 100rpx;
			margin-top: 40rpx;
			font-weight: 700;
			margin-left: 64rpx;
		}

	}
</style>
